<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { roleStore } from '@/stores/role'
import { headersStore } from '@/stores/apiHeader'
import { baseToolsStore } from '@/stores/baseTools'
// 全球各区雇员人数趋势
import GlobalEmployeeNumberTrendsByRegion from '@/components/PermissionsModule/Human/GlobalEmployeeNumberTrendsByRegion.vue'
// 全球人员结构-人数分布
import GlobalPersonnelStructureReportPeople from '@/components/PermissionsModule/Human/GlobalPersonnelStructureReportPeople.vue'
//// 全球各区雇员人数对比
import GlobalEmployeeNumByRegionComparison from '@/components/PermissionsModule/Human/GlobalEmployeeNumByRegionComparison.vue'
const store = roleStore() as any
const isDepartment = computed(() => baseToolsStore().isDepartment) //是否是部门
const { humanLevel } = store
// 1 全球 2 区域 3 国家
const newRole = ref(0)
newRole.value = humanLevel // 初始化面板权限
// 深度监听 store.panelPermissions
watch(
  () => store.humanLevel,
  (newVal) => {
    newRole.value = newVal
  }
)
//获取当前月份
const month = computed(() => {
  return headersStore().month
})
// 是否为集团总部
const isHeadquarters = computed(() => {
  return headersStore().scope_code === '0000100001'
})

const props = defineProps({
  showRemainingComponents: {
    type: Boolean,
    default: false,
  },
})
</script>

<template>
  <GlobalEmployeeNumberTrendsByRegion v-if="newRole != 0 && month === '00'" />
  <GlobalEmployeeNumByRegionComparison v-if="newRole != 0 && month !== '00'" />
  <GlobalPersonnelStructureReportPeople />

  <div v-if="showRemainingComponents"></div>
</template>
<style lang="scss" scoped></style>
